<template>
    <div class="article-edit">
        <el-card class="!border-none" shadow="never" style="margin-bottom: 10px;">
            <el-page-header :content="$route.meta.title" @back="$router.back()"/>
        </el-card>
        <el-card class="!border-none" shadow="never">
            <div class="font-medium mb-7">
                <div>基础信息</div>
                <div class="flex btns">
                    <el-button v-if="infos.order.status == 3" v-perms="['seat.seatOrder/delOrder']" type="danger" @click="handleDel(infos.order.order_id)">作废</el-button>
                    <!-- <el-button v-if="infos.order.status==2&&infos.order.pay_type==3" v-perms="['seat.seatOrder/authOrder']" type="primary" @click="handleSure(infos.order.order_id)">到账确认</el-button> -->
                </div>
            </div>
            <el-row type="flex">
                <el-col class="flex" :span="8">
                    <div class="title">订单编号：</div>
                    <div class="">{{ infos.order.sn }}</div> 
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">订单状态：</div>
                    <div class="">{{ orderTxt(infos.order.order_status) }}</div>
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">创建时间：</div>
                    <div class="">{{ infos.order.create_time }}</div>
                </el-col>
            </el-row>
        </el-card>
        <el-tabs class="align-middle" v-model="defaultTab">
            <el-tab-pane label="主体信息" name="main_info">
                <el-card  class="!border-none mt-4" shadow="never">
                    <el-row class="mar-bottom" v-if="infos.order.user_identity">
                        <el-col :span="3" class="title">主体类型：</el-col>
                        <el-col :span="9">{{infos.order.user_identity == 1?'个人':'企业'}}</el-col>
                    </el-row>
                    <template v-if="infos.order.user_identity == 1">
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">姓名：</el-col>
                            <el-col :span="9">{{ infos.user_info.identity_name }}</el-col>
                            <el-col :span="3" class="title">身份证号：</el-col>
                            <el-col :span="9">{{ infos.user_info.identity_no }}</el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">认证：</el-col>
                            <el-col :span="9">{{ infos.user_info.is_real_identify == 1 ? '已认证':'未认证' }}</el-col>
                        </el-row>
                    </template>
                    <!-- user_identity 1是个人2是企业 -->
                    <template v-if="infos.order.user_identity == 2">
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">工商营业执照：</el-col>
                            <el-col :span="9">
                                <image-contain
                                    :src="infos.company_info.business_image_url"
                                    :width="80"
                                    :height="80"
                                    :preview-src-list="[infos.company_info.business_image_url]"
                                    preview-teleported
                                    fit="contain"
                                />
                            </el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">公司全称：</el-col>
                            <el-col :span="9">{{ infos.company_info.business_name }}</el-col>
                            <el-col :span="3" class="title">统一社会信用代码：</el-col>
                            <el-col :span="9">{{ infos.company_info.business_credit_code }}</el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">身份证人像面：</el-col>
                            <el-col :span="9">
                                <image-contain
                                    :src="infos.company_info.id_card_front_image_url"
                                    :width="80"
                                    :height="80"
                                    :preview-src-list="[infos.company_info.id_card_front_image_url]"
                                    preview-teleported
                                    fit="contain"
                                />
                            </el-col>
                            <el-col :span="3" class="title">身份证国徽面：</el-col>
                            <el-col :span="9">
                                <image-contain
                                    :src="infos.company_info.id_card_back_image_url"
                                    :width="80"
                                    :height="80"
                                    :preview-src-list="[infos.company_info.id_card_back_image_url]"
                                    preview-teleported
                                    fit="contain"
                                />
                            </el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">法人姓名：</el-col>
                            <el-col :span="9">{{ infos.company_info.id_card_name }}</el-col>
                            <el-col :span="3" class="title">法人身份证号：</el-col>
                            <el-col :span="9">{{ infos.company_info.id_card_no }}</el-col>
                        </el-row>
                    </template>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="工位信息" name="station_info">
                <el-card  class="!border-none mt-4" shadow="never">
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">场地名称：</el-col>
                        <el-col :span="9">{{ infos.order.office_place_name }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">工位：</el-col>
                        <el-col :span="20">
                            <span v-for="(item,index) in infos.order.seat_info" :key="index">{{ item }}{{ index < infos.order.seat_info.length - 1 ? '、':'' }}</span>
                        </el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">工位收费标准：</el-col>
                        <el-col :span="9">{{ infos.order.base_price }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">租赁开始日期：</el-col>
                        <el-col :span="9">{{ infos.order.start_time }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">租赁结束日期：</el-col>
                        <el-col :span="9">{{ infos.order.end_time }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">费用总计：</el-col>
                        <el-col :span="9">{{ infos.order.actual_money }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">费用计算：</el-col>
                        <el-col :span="9">{{ infos.order.tips }}</el-col>
                    </el-row>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="协议信息" name="agreement_info">
                <el-card  class="!border-none mt-4" shadow="never">
                    <el-row class="mar-bottom">
                        <el-col :span="3" :offset="9" class="title">协议签署状态：</el-col>
                        <el-col :span="9">{{ infos.order.is_sign == 1 ? '签署成功':'未签署' }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom" v-if="infos.order.is_sign == 1">
                        <el-col :span="9" :offset="9">
                            <el-button type="primary" @click="onDownload">下载签署文件</el-button>
                        </el-col>
                    </el-row>
                    <!-- <PDFView :pdfUrl="linkUrl" /> -->
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="支付订单信息" name="pay_info">
                <el-card  class="!border-none mt-4" shadow="never">
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">总价：</el-col>
                        <el-col :span="9">{{ infos.pay_info.actual_money }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">积分：</el-col>
                        <el-col :span="9">
                            <span v-if="infos.pay_info.deduction_price">-¥{{ infos.pay_info.deduction_price }}</span>
                            <span v-else></span>
                        </el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">实付款：</el-col>
                        <el-col :span="9">{{ infos.pay_info.after_folding_price }}</el-col>
                    </el-row>

                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">支付单号：</el-col>
                        <el-col :span="9">{{ infos.pay_info.pay_order_num }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">下单时间：</el-col>
                        <el-col :span="9">{{ infos.pay_info.create_time }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">支付方式：</el-col>
                        <el-col :span="9">
                            <span v-if="infos.pay_info.pay_type == 1">微信</span>
                            <span v-if="infos.pay_info.pay_type == 2">支付宝</span>
                            <span v-if="infos.pay_info.pay_type == 3">对公转账</span>
                        </el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">支付状态：</el-col>
                        <el-col :span="9">
                            <!-- 支付状态 1:待支付 2：支付中 3.等待确认（对公） 4：已支付 5:支付失败 -->
                            <span v-if="infos.pay_info.pay_status == 1">待支付</span>
                            <span v-if="infos.pay_info.pay_status == 2">支付中</span>
                            <span v-if="infos.pay_info.pay_status == 3">等待确认（对公）</span>
                            <span v-if="infos.pay_info.pay_status == 4">已支付</span>
                            <span v-if="infos.pay_info.pay_status == 5">支付失败</span>
                        </el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">支付时间：</el-col>
                        <el-col :span="9">{{ infos.pay_info.pay_time }}</el-col>
                    </el-row>
                    <!-- <el-row class="mar-bottom">
                        <el-col :span="3" class="title">户名：</el-col>
                        <el-col :span="9">{{ infos.pay_info.name }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">账户：</el-col>
                        <el-col :span="9">{{ infos.pay_info.name }}</el-col>
                    </el-row>
                    <el-row class="mar-bottom">
                        <el-col :span="3" class="title">开户行：</el-col>
                        <el-col :span="9">{{ infos.pay_info.bank }}</el-col>
                    </el-row> -->
                </el-card>
                
            </el-tab-pane>
            <el-tab-pane label="身份资料" name="identity_info">
                <el-card  class="!border-none mt-4" shadow="never" v-for="(item,index) in seatInfo" :key="index">
                    <div class="card-left">
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">工位：</el-col>
                            <el-col :span="9">{{ item.seat_name }}</el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">身份证人像面：</el-col>
                            <el-col :span="9">
                                <image-contain
                                    v-if="item.idcardpic"
                                    :src="item.idcardpic"
                                    :width="80"
                                    :height="80"
                                    :preview-src-list="[item.idcardpic]"
                                    preview-teleported
                                    fit="contain"
                                />
                            </el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">身份证国徽面：</el-col>
                            <el-col :span="9">
                                <image-contain
                                    v-if="item.idcardpic_back"
                                    :src="item.idcardpic_back"
                                    :width="80"
                                    :height="80"
                                    :preview-src-list="[item.idcardpic_back]"
                                    preview-teleported
                                    fit="contain"
                                />
                            </el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">姓名：</el-col>
                            <el-col :span="9">{{ item.realname }}</el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">身份证：</el-col>
                            <el-col :span="9">{{ item.idcard }}</el-col>
                        </el-row>
                        <el-row class="mar-bottom">
                            <el-col :span="3" class="title">手机号：</el-col>
                            <el-col :span="9">{{ item.phone }}</el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
        <el-dialog
			v-model="showCompany"
			title="到账确认"
			width="500"
		>
			<div class="flex">
				<el-icon size="20" color="#E6A23C"><Warning /></el-icon>
				<div>请认真核对银行流水，确认租金是否已到账</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="showCompany = false">取消</el-button>
					<el-button type="danger" @click="notReceived">未到账</el-button>
					<el-button type="primary" @click="alreadyReceived">已到账</el-button>
				</div>
			</template>
		</el-dialog>
    </div>
</template>

<script setup lang="ts">
import { orderInfo, delOrder, payFail, authOrder, getSignLink, getMsgInfo } from '@/api/sharedoffice/orderlists'
import feedback from '@/utils/feedback';
// import PDFView from "@/components/pdf/pdfPreview.vue"

//默认选择的tab
const defaultTab = ref('main_info')

// 订单状态文字转化
const orderTxt = (num:any) => {
    return computed(():string=>{
        let txt = '';
        switch(num) {
            case 1: txt = '有效';break;
            case 2: txt = '过期';break;
            case 3: txt = '无效';break;
            case 4: txt = '作废';break;
        }
        return txt;
    })
}

const route = useRoute()
const router = useRouter()

const infos: any = ref({
    order: {
        base_price: ''
    },
    pay_info: {}
});
const getDetails = async () => {
  const data = await orderInfo({
    order_id: route.query.id
  })
  data.order.tips = `（${data.order.base_price.split('元')[0]}*${data.order.month_id}+${data.order.base_price.split('元')[0]}）*${data.order.seat_info.length}（月租金*月数+押金）*工位数`
  infos.value = data;
  if (data.order.is_sign == 1) {
    handleSign(data.order.id)
  }
  getSeatInfo(route.query.id)
}

const showCompany = ref(false)
const order_id = ref()
const handleSure = async (id : number) => {
    showCompany.value = true;
    order_id.value = id;
}
//未到账
const notReceived = async () => {
    await payFail({ id: order_id.value })
    showCompany.value = false;
    getDetails()
}
//已到账
const alreadyReceived = async () => {
    await authOrder({ id: order_id.value })
    showCompany.value = false;
    getDetails()
}
// 作废
const handleDel = async (id : number) =>{
    await feedback.confirm('订单作废后，客户将无法查看对应订单，所选工位会变为空闲，请确认是否作废该订单？', '作废订单','error')
    try{
        await delOrder({id})
        router.back()
    }catch(e){
        //TODO handle the exception
    }
}

const linkUrl = ref('')
// 签署成功，显示签署文件
const handleSign = async (id : number) => {
    try{
        const data = await getSignLink({ id });
        if( data.link.url ){
            linkUrl.value = data.link.url
        }else{
            feedback.msgError(data.link.msg);
        }
    }catch(e){
        console.log(e);
        //TODO handle the exception
    }
}
const onDownload = () => {
    // window.open(linkUrl.value);
    window.location.href = linkUrl.value;
}

const seatInfo:any = ref([]);
const getSeatInfo = async(id:any) => {
    const data = await getMsgInfo({ id });
    seatInfo.value = data;
    console.log(seatInfo.value)
}

route.query.id && getDetails()
</script>
<style lang="scss" scoped>
.flex{
    display: flex;
}
.title{
    color: #ccc;
}
.btns{
    justify-content: flex-end;
}
.mar-bottom{
    margin-bottom: 20px;
}
.card-left{
    padding-left: 0px;
}
::v-deep .el-tabs__nav-wrap {
    overflow-x: auto;
    width: 86%;
    margin-left: 10px;
}
::v-deep .el-tabs__nav-wrap::after {
    display: none;
}
</style>